<template>

  <div style="margin: 0 8px;">
    <n-button block @click="handleManagerContactList">
      <template #icon>
        <svg-icon name="person" />
      </template>
      通讯录管理
    </n-button>
  </div>

  <n-collapse>
    <n-collapse-item title="新的朋友" name="newFriends">
      <template #header-extra>
        <div class="total-number">0</div>
      </template>
      <friend-item />
    </n-collapse-item>

    <n-collapse-item title="群聊" name="group">
      <template #header-extra>
        <div class="total-number">1</div>
      </template>
      <div>群聊</div>
    </n-collapse-item>

    <n-collapse-item title="公众号" name="publicAccount">
      <template #header-extra>
        <div class="total-number">38</div>
      </template>
      <div>公众号</div>
    </n-collapse-item>

    <n-collapse-item title="服务号" name="serviceAccount">
      <template #header-extra>
        <div class="total-number">29</div>
      </template>
      <div>服务号</div>
    </n-collapse-item>

    <n-collapse-item title="企业微信联系人" name="qywxUser">
      <template #header-extra>
        <div class="total-number">16</div>
      </template>
      <div>企业微信联系人</div>
    </n-collapse-item>

    <n-collapse-item title="联系人" name="friends">
      <template #header-extra>
        <div class="total-number">312</div>
      </template>
      <div>联系人</div>
    </n-collapse-item>
  </n-collapse>
</template>

<script setup>
import FriendItem from "./friendItem.vue";
import { useWindow } from "@/hooks/useWindow.js";
const { createWindow } = useWindow();

const handleManagerContactList = async() => {
  await createWindow('contact/manager', {
    title: '通讯录管理',
    decorations: false,
    width: 500,
    height: 400,
  });
};
</script>

<style lang="scss" scoped>
.n-collapse {
  .n-collapse-item {
    margin-top: 0;
    padding: 0;
    :deep(.n-collapse-item__header) {
      padding: 4px 12px;
    }
    :deep(.n-collapse-item__content-inner) {
      padding-top: 0;
    }
  }
}
.n-collapse .n-collapse-item:not(:first-child) {
  border-top: 0;
}
.n-collapse-item__header-main {
  color: #161616;
}
:deep(.n-base-icon) {
  color: #9e9e9e;
}
.total-number {
  font-size: 12px;
  color: #9e9e9e;
}
</style>
